<template>
  <div id="ColOffline">
    <!--主内容区-->
    <el-space fill wrap :size="5" fill-ratio="90" direction="vertical" style="margin: auto auto 10px;width: 100%">
      <el-card shadow="always" class="card" v-for="(t) of tableDatas">
        <div slot="header" class="clearfix">
          <span>{{t.name}}</span>
          <span style="float: right; padding: 3px 0;font-size: 12px">已发布</span>
        </div>
      </el-card>
    </el-space>

  </div>
  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1, 3, 5, 10]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="justify-content: center;">
  </el-pagination>
</template>

<script>

import axios from "axios";
import Breadcrumb from "@/components/Breadcrumb";

export default {
  name: "ColOffline",
  components: {Breadcrumb},
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      total: 10,
      small: false,
      background: true,
      disabled: false,
      tableDatas: 0,
    }
  },
  methods: {
    handleSizeChange(val) {
      axios.post('/project', {
        page: this.currentPage,
        pageSize: val
      }).then(res => {
        let r = res.data
        this.total = r.total
        this.tableDatas = r.datas
      }).catch(err => {
        console.log(err)
      })
    },
    handleCurrentChange(val) {
      axios.post('/project', {
        page: val,
        pageSize: this.pageSize
      }).then(res => {
        let r = res.data
        this.total = r.total
        this.tableDatas = r.datas
      }).catch(err => {
        console.log(err)
      })
    },
  },
  mounted() {
    this.handleCurrentChange(1)
  },
  watch: {
    '$route': 'handleCurrentChange'
  },
}
</script>

<style scoped>

</style>
